<template>
<view class="wallet">
	<view @click="goBack()" class="top-box-title">
		<image src="/static/left.png" style="height: 30upx; width: 18upx; margin-left: 20upx; vertical-align: middle;"></image>
		<text style="margin-left: 20upx; vertical-align: middle; position: relative; top: -1upx;">我的钱包</text>
	</view>
	<view style="width: 100%; height: calc( 100% - 280upx ); display: flex; flex-direction: column; justify-content: center; align-items: center;">
		<view style="text-align: center;">
			<view style="font-size: 80upx; color: #FFF;">{{ info.wallet }}</view>
			<view style="font-size: 30upx; color: #FFF; margin-top: 50upx;">总余额(元)</view>
			<view style="width: 300upx; height: 95upx; line-height: 95upx; background-color: #FFF; box-shadow: 0px 3upx 17upx 1upx rgba(246, 129, 66, 0.22); border-radius: 48upx;
				margin-top: 120upx;text-align: center; color: #f57e40; font-weight: bold; font-size: 30upx;" @click="turnTo('chongzhi')">充值余额</view>
		</view>
	</view>	
	<view class="wallet_bottom">
		<view style="width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
			<view style="margin-left: 52upx;">
				<view style="font-size: 36upx; font-weight: bold; color: #e97b41;">{{ info.deposit == 0 ? '您未缴纳押金' : ('押金：￥' + info.deposit) }}</view>
				<view style="font-size: 24upx; color: #cdcdcd; margin-top: 12upx;">使用完成后，可随时提现押金</view>
			</view>
			<view style="width: 200upx; height: 60upx; line-height: 60upx; background-color: #ef7738; border-radius: 30upx; text-align: center; color: #FFF;
				font-size: 30upx; font-weight: bold; margin-right: 54upx;" @click="clickYajin" v-if="showBtn">{{ info.deposit == 0 ? '缴纳押金' : '退回押金' }}</view>
		</view>
	</view>
	<!-- <view class="content">
		<view class="content-inner" style="color: #fff;">
			<view style="width: 100%; height: 100%; position: absolute; left: 0; top: -110upx;">
				<view style="font-size: 90upx; text-align: center; font-weight: 600;">{{info.wallet}}</view>
				<view style="font-size: 32upx; text-align: center; margin-top: 80upx;">总余额（元）</view>
				<view @click="turnTo('chongzhi')" style="width: 250upx; height: 66upx; line-height: 66upx; margin: 73upx auto 0; text-align: center; border-radius: 33px; background-color: #ffffff; color: #3f6bec; font-size: 30upx;">
					充值余额
				</view>			
				<view style="width: 670upx; height: 60upx; margin: 360upx auto 0; position: relative;">
					<image src="/static/wallet1.png" style="width: 23upx; height: 30upx; display: block; position: absolute; left: 5upx; top: 15upx;"></image>
					<view style="font-size: 30upx; position: absolute; left: 60upx; top: 15upx; color: #000000; line-height: 1;">押金：￥{{info.deposit}}</view>
					<view v-if="info.deposit==0&&!info.depositFree" @click="turnTo('yajin')" style="width: 224upx; height: 60upx; line-height: 60upx; text-align: center; border-radius: 30px; background-color: #18a3dc; color: #ffffff; font-size: 30upx; position: absolute; top: 0; right: 0;">
						充值押金
					</view>			
					<view v-else-if="info.deposit!=0" @click="turnTo('yajintuihui')" style="width: 224upx; height: 60upx; line-height: 60upx; text-align: center; border-radius: 30px; background-color: #18a3dc; color: #ffffff; font-size: 30upx; position: absolute; top: 0; right: 0;">
						退回押金
					</view>		
				</view>
			</view>
		</view> -->
	</view>
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			info: {
				wallet: 0,
				deposit: 0,
				depositFree: false
			},
			showBtn: false
		}
	},
	methods: {
		turnTo(name) { uni.navigateTo({ url: name }); },		
		goBack() {
			uni.navigateBack({ delta: 1 });			
		},
		clickYajin() {
			if ( this.info.deposit > 0 ) {
				this.turnTo('yajintuihui');
			} else {
				this.turnTo('yajin');				
			}
		}
	},
	onShow() {			
		http.request({
			url: `borrow/myWallet?a=a`,
			method: 'get',
			success: (res) => {		
				this.info = res.dataList || {};
				this.showBtn = true;
			}
		});
	}
}
</script>

<style>
.wallet {
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(-172deg, #e4814d, #ef7738, #f88446);
}
.wallet .top-box-title {
	height: 70upx;
	line-height: 70upx;
	position: absolute;
	top: 50upx;
	left: 0;
	color: #FFFFFF;
	font-size: 34upx;
	z-index: 10;
}
.wallet_bottom {
	width: 100%;
	height: 260upx;
	background: #FFF;
	box-sizing: border-box;
	box-shadow: 0upx -3upx 17upx 1upx rgba(246, 129, 66, 0.22);
	border-radius: 30upx 30upx 0upx 0upx;
	position: absolute;
	left: 0;
	bottom: 0;
}
</style>
